<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // window.onload：页面加载完毕事件，当页面加载完毕后执行该事件中的代码
        window.onload = function () {
            let body = document.body;
            // body.children：只获取HTML元素
            // body.childNodes：获取XML节点
            console.log(body.children);//用起更方便一点
            console.log(body.childNodes);//如果代码全是一行，且没有空格，那么效果与children一致
            // for (const item of body.children) {//枚举所有属性和方法
            //     console.log(item);
            //     item.innerText = "index";
            // }

            // for (const item of body.childNodes) {//枚举所有属性和方法
            //     console.log(item);
            //     //if (item.nodeType === 1.txt) {
            //     if (item.nodeType === Node.ELEMENT_NODE) {
            //         //就是一个页面元素
            //         item.append("<div>div</div>");
            //     }
            // }
            console.log(body.nextSibling);//下一个兄弟(相邻)节点，
            console.log(body.previousSibling);//上一个

            let span1 = document.getElementById("span1");
            console.log(span1.parentElement);
            console.log(span1.parentNode);
            console.log(span1.getRootNode());
            console.log(body.firstChild);
            console.log(body.firstElementChild);

            //清除body中的所有标签，推荐的删除方法
            while (body.hasChildNodes()) {
                body.firstChild.remove();
            }
            //清空表格中单元格内容
        }
    </script>
</head>
<body>
<span id="span1">这是一个文本标签1</span>
<span id="span2">这是一个文本标签2</span>
<span name="s1">这是一个文本标签3</span>

</body>
</html>